/**
 * 通知公告
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right" class="margin-t10">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="boxBlock"> 
      <div class="serachTop"> 
          <!-- 搜索筛选 -->
        <el-form :inline="true" :model="formInline" class="user-search">
          <el-form-item  >
            <el-input
              size="small"
              v-model="formInline.noticeTitle"
              placeholder="输入标题"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-search"
              @click="search"
              >搜索</el-button
            >
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              @click="handleEdit('addForm')"
              v-if="hasPermission0"
            >
              发布
            </el-button>
          </el-form-item>
        </el-form> 
      </div>
   
    
    <!--列表-->
    <div class="ra_box">
      <el-table
        size="small"
        :data="listData"
        highlight-current-row
        v-loading="loading"
        element-loading-text="拼命加载中"
        style="width: 100%"
      >
        <el-table-column prop="noticeId" label="ID" width="80" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="noticeTitle" label="标题" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="noticeContent" label="内容" show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="createBy"
            label="操作人"
            show-overflow-tooltip
            width="120"
          >
         </el-table-column>
        <el-table-column
          prop="createTime"
          label="发布时间"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="更新时间"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <div>{{ scope.row.updateTime }}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="250">
          <template slot-scope="scope">
            <el-button 
              @click="handleEdit('editForm', scope.row)"  
              size="mini"   type="success" plain
               :key="scope.$index"
              v-if="hasPermission0"
            > 
              编辑 
            </el-button> 
            <el-button
            size="mini"
            type="primary"
            @click="clickDel(scope.$index, scope.row)"
          >
            删除
          </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <Pagination
      v-bind:child-msg="pageparm"
      @callFather="callFather"
    ></Pagination>
  </div>
    <!-- 添加界面 -->
    <el-dialog
      title="添加"
      :close-on-click-modal="false"
      :visible.sync="addFormVisible"
      width="50%"
      @close="closeDialog('addForm')"
    >
      <el-form label-width="120px" :model="addForm" ref="addForm">
        <el-form-item label="标题">
          <el-input
            size="small"
            v-model="addForm.noticeTitle"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" class="content">
          <!-- <vue-editor v-model="addForm.noticeContent"> </vue-editor> -->
          <el-input
            type="textarea"
            v-model="addForm.noticeContent"
            auto-complete="off"
            :rows="16"
            resize="none"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('addForm')">取消</el-button>
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitFormAdd('addForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <!-- 编辑界面 -->
    <el-dialog
      title="详情"
      :close-on-click-modal="false"
      :visible.sync="editFormVisible"
      width="50%"
      @close="closeDialog('editForm')"
    >
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="标题">
          <el-input
            size="small"
            v-model="editForm.noticeTitle"
            auto-complete="off"
            placeholder="请输入名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="内容" class="content">
          <!-- <vue-editor v-model="editForm.noticeContent"> </vue-editor> -->
          <el-input
            type="textarea"
            :rows="16"
            v-model="editForm.noticeContent"
            auto-complete="off"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item label="发布时间" v-if="editForm.createTime">
          <el-input
            size="small"
            v-model="editForm.createTime"
            auto-complete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="更新时间" v-if="editForm.updateTime">
          <el-input
            size="small"
            v-model="editForm.updateTime"
            auto-complete="off"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')"
          >取消</el-button
        >
        <el-button
          size="small"
          type="primary"
          :loading="loading"
          class="title"
          @click="submitForm('editForm')"
          >保存</el-button
        >
      </div>
    </el-dialog>
    <codeChoose ref="codeRef" :fromType="verType" @setParam="getParam" ></codeChoose>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
} from "../../utils/util";
import {
  baseURL,
  req,
  reqJson,
  encrypt,
  decrypt,
  reqtoken,
  service,
  format,
  getUrl,
} from "../../api/axiosFun";
import Pagination from "../../components/Pagination";
import { VueEditor } from "vue2-editor";
import codeChoose from '@/components/codeChoose.vue'
export default {
  data() {
    return {
      loading: false, //是显示加载
      b: format,
      editFormVisible: false,
      addFormVisible: false,
      editForm: {
        noticeContent: "",
        noticeId: "",
        noticeTitle: "",
        noticeType: 2,
      },
      addForm: {
        noticeContent: "",
        noticeTitle: "",
        noticeType: 2,
      },
      formInline: {
        noticeTitle: "",
        noticeContent: "",
        noticeType: "2",
        pageNum: 1,
        pageSize: 10,
      },
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 10,
        total: 10,
      },
      hasPermission0:false,
      isAdd: true,

      verArry:[],
      verType:'',
      curItem:'', 
      userInfo: null,
      fd:''

    };
  },
  // 注册组件
  components: {
    Pagination,
    VueEditor,
    codeChoose

  },
  created() {
    this.getdata(this.formInline);
    this.userInfo = JSON.parse(this.$store.state.user);
    this.hasPermission0 = this.$hasPermission(this.userInfo,['admin','admin8'])
  },
  computed: {
    ...mapGetters(["getUser"]),
    
  },
  watch: {},
  methods: {
    hasPermissionMethod(data) {
      // 调用全局公共方法
      this.userInfo = JSON.parse(this.$store.state.user);
      return this.$hasPermission(this.userInfo,data) 
    },
    getdata(parameter) {
      this.loading = true;
      let url = getUrl(parameter);
      console.log(url);

      // this.pageparm
      service
        .get("/jwt/getNoticeList" + url, {})
        .then((res) => {
          this.loading = false;
          if (res.code == 0) {
            this.listData = res.rows;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.total;
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.loading = false;
          this.$message.error(err);
        });
    },
    // 分页插件事件
    callFather(parm) { 
      this.pageNum = parm.currentPage;
      this.pageSize = parm.pageSize;
      this.getdata(
        {
          ...this.formInline, 
          pageNum:this.pageNum,
          pageSize:this.pageSize
        }
      );
    },
    // 搜索事件
    search() {
      this.getdata(this.formInline);
    },
    //显示编辑界面
    handleEdit(name, row) {
      if (name == "editForm") {
        this.editFormVisible = true;
        this.isAdd = false;
        this.editForm = row;
      } else if (name == "addForm") {
        this.addFormVisible = true;
        this.editForm = {}
        this.isAdd = true;
      }
    },
    getParam(val,type){  
      this.headers = val ; 
      if(type=='add'){
        this.addSaveAuth() 
      }else if(type=='edit'){
        this.editSaveAuth() 
      }
      
    },  
    editSaveAuth(){ 
      let parm = {
          noticeContent: this.editForm.noticeContent,
          noticeId: this.editForm.noticeId,
          noticeTitle: this.editForm.noticeTitle,
          noticeType: 2,
       };
      //  url = getUrl(parm); 
        reqJson('post',"/api/admin/editNotice", parm,{
          headers:{
            ...this.headers
          }
         }) 
          .then((res) => {
            this.editFormVisible = false;
            this.loading = false;
            if (res.code == 0) {
              this.getdata(this.formInline);
              this.closeDialog("editForm");
              this.$message({
                type: "success",
                message: res.msg,
              });
            } else {
              this.$message({
                type: "info",
                message: res.msg,
              });
            }
          })
          .catch((err) => {
            this.$message.error(err);
          });
       
    },
    addSaveAuth(){
      reqJson('post',"/api/admin/addNotice", this.addForm,{
      headers:{
        ...this.headers
      }
      })  
      .then((res) => {
        this.loading = false;
        if (res.code == 0) {
          this.getdata(this.formInline);
          this.closeDialog("addForm");
          this.$message({
            type: "success",
            message: res.msg,
          });
        } else {
          this.$message({
            type: "info",
            message: res.msg,
          });
        }
      })
      .catch((err) => {
        this.$message.error(err);
      });
    },
    submitForm(editData) {
      this.$refs[editData].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.verType = 'edit'
        if(this.userInfo&&this.userInfo.verifyApi){
            this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes('/api/admin/editNotice')){
            this.$refs.codeRef.openDialog(); 
          }else{
            this.editSaveAuth();
          }
        }else{
          this.editSaveAuth();
        }
      });
        
    },
    submitFormAdd(editData) {
      this.$refs[editData].validate((valid) => {
        if (!valid) {
          return false;
        }
        this.verType = 'add'
        if(this.userInfo&&this.userInfo.verifyApi){
            this.verArry =  this.userInfo.verifyApi.split(',');
          if(this.verArry.includes('/api/admin/addNotice')){
            this.$refs.codeRef.openDialog(); 
          }else{
            this.addSaveAuth();
          }
        }else{
          this.addSaveAuth();
        } 
       
      });
    },
    // 关闭编辑、增加弹出框
    closeDialog(formName) {
      if (formName == "editForm") {
        this.editFormVisible = false;
        this.$refs.editForm.resetFields();
      } else if (formName == "addForm") {
        this.addFormVisible = false;
        this.$refs.addForm.resetFields();
      }
    },
    clickDel(index,item){
      this.$confirm("确认本条公告吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
      .then(() => {
        this.loading = true; 
        reqJson('post',"/api/admin/deleteNotice/"+item.noticeId) 
        .then((res) => { 
          this.loading = false;
          if (res.code == 0) {
            this.getdata(this.formInline); 
            this.$message({
              type: "success",
              message: res.msg,
            });
          } else {
            this.$message({
              type: "info",
              message: res.msg,
            });
          }
        })
        .catch((err) => {
          this.$message.error(err);
        });


      })
    }
  },
};
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
/* .content,
.content .quillWrapper {
  height: 500px;
} */
/deep/ #quill-container {
  height: 400px;
}
</style>

 
 

 